@import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');

.button-width-100{
    width: 100%;
}

/* --- Scoped Table headers for manager_add_assessors and manager_user --- */
.manager-add-assessors-page .table > thead > tr > th,
.manager-user-page .table > thead > tr > th {
    text-align: center;
}

/* --- Scoped md-tabs for evaluation pages --- */
.fill-in-assessment-page .md-tabs .nav-item,
.report-page .md-tabs .nav-item,
.report-result-page .md-tabs .nav-item,
.manager-final-score-page .md-tabs .nav-item,
.manager-form-criterion-page .md-tabs .nav-item {
    width: calc(100% / 4) !important;
    text-align: center;
}

/* --- Scoped card margins --- */
.fill-in-assessment-page .card,
.report-page .card,
.report-result-page .card,
.manager-final-score-page .card,
.manager-form-criterion-page .card {
    margin-bottom: 0px !important;
}

/* --- Scoped active navigation lists --- */
.fill-in-assessment-page ul.md-tabs li.active,
.report-page ul.md-tabs li.active,
.report-result-page ul.md-tabs li.active,
.manager-final-score-page ul.md-tabs li.active,
.manager-form-criterion-page ul.md-tabs li.active {
    border-top: none !important;
    background-color: #404e67 !important;
    color: white !important;
    cursor: auto !important;
}

/* --- Scoped table formats for manager_final_score --- */
.manager-final-score-page table thead tr.center th {
    text-align: center !important;
    border: solid;
    border-width: thin;
    vertical-align: middle;
}
.manager-final-score-page table tbody tr td {
    border: 1px solid #e9ecef;
}
.manager-final-score-page table tbody tr td.center {
    text-align: center !important;
}
.manager-final-score-page .table-bordered td,
.manager-final-score-page .table-bordered th {
    border: 1px solid #000000;
}
.manager-final-score-page .table-bordered td.text_center {
    text-align: center;
}

/* --- Scoped table headers for manager_form_criterion --- */
.manager-form-criterion-page table thead tr th.center,
.manager-form-criterion-page table tbody tr th.center {
    text-align: center;
}

/* --- Scoped center cells for fill_in_assessment --- */
.fill-in-assessment-page table tbody tr td.center,
.fill-in-assessment-page table thead tr th.center {
    text-align: center !important;
}

.modern-placeholder-card {
                background: transparent;
                border: none;
                padding: 50px 20px;
                margin: 30px auto;
                max-width: 500px;
                text-align: center;
                box-shadow: none;
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

#v_1_1:has(.modern-placeholder-card) {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }

#v_1_1:has(.modern-placeholder-card) .card-block {
                padding: 0 !important;
            }

#v_1_1:has(.modern-placeholder-card) .card {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }

.modern-placeholder-card:hover {
                transform: translateY(-4px);
            }

.icon-glow-wrapper {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 25px;
                position: relative;
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

.modern-placeholder-card:hover .icon-glow-wrapper {
                transform: scale(1.08);
            }

.filter-required .icon-glow-wrapper {
                background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
                border: 1px solid #eab308;
                box-shadow: 0 10px 25px rgba(234, 179, 8, 0.15);
            }

.no-data-found .icon-glow-wrapper {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                border: 1px solid #ef4444;
                box-shadow: 0 10px 25px rgba(239, 68, 68, 0.12);
            }

.icon-glow {
                font-size: 38px;
                line-height: 1;
            }

.filter-required .icon-glow {
                color: #a16207;
                text-shadow: 0 1px 2px rgba(254, 240, 138, 0.5);
            }

.no-data-found .icon-glow {
                color: #b91c1c;
                text-shadow: 0 1px 2px rgba(254, 202, 202, 0.5);
            }

.modern-placeholder-card h3 {
                font-family: 'Open Sans', 'Kanit', sans-serif;
                font-weight: 600;
                font-size: 22px;
                margin-bottom: 12px;
                color: #2b3a4a;
                letter-spacing: -0.01em;
            }

.modern-placeholder-card p {
                font-family: 'Open Sans', 'Kanit', sans-serif;
                color: #6c757d;
                font-size: 14px;
                line-height: 1.6;
                margin: 0 auto;
                max-width: 380px;
            }

table tbody tr td.center,
        table thead tr.center th {
            text-align: center;
        }

table thead tr.center th {
            text-align: center !important;
            border: solid;
            border-width: thin;
            vertical-align: middle;
            border-color: black;
        }

table tbody tr td {
            border: 1px solid #e9ecef;
        }

.theme-loader {
            background-color: rgba(255, 255, 255, 0.65) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

table tbody tr td.center , table thead tr.center th{
                text-align: center;
            }

table thead tr.center th {
                text-align: center !important;
                border: solid;
                border-width: thin;
                vertical-align:middle;
                border-color: black;
            }

table thead tr th {
            text-align: center;
        }

.table-bordered td, .table-bordered th {
            border: 1px solid #cbd5e1;
        }

.gov-report-container {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #cbd5e1;
            padding: 0;
            margin-bottom: 30px;
            overflow: hidden;
            font-family: 'Sarabun', 'Kanit', 'Open Sans', sans-serif;
        }

.gov-report-table {
            width: 100%;
            margin-bottom: 0 !important;
            border-collapse: collapse !important;
            border: none !important;
        }

.gov-report-table thead th {
            background-color: #0f172a !important; 
            color: #ffffff !important;
            font-weight: 600;
            padding: 14px 16px !important;
            font-size: 1.05rem;
            border: 1.5px solid #334155 !important;
            text-align: center;
        }

.gov-composition-cell {
            background-color: #1e3a8a !important; 
            color: #ffffff !important;
            font-weight: 700;
            font-size: 1.1rem !important;
            padding: 16px 20px !important;
            border: 1.5px solid #1e3a8a !important;
            text-align: left !important;
            border-left: 6px solid #d97706 !important; 
            letter-spacing: 0.01em;
        }

.gov-topic-cell {
            background-color: #fef3c7 !important; 
            color: #78350f !important; 
            font-weight: 600;
            font-size: 0.98rem !important;
            padding: 14px 28px !important;
            border: 1px solid #fde68a !important;
            text-align: left !important;
            border-left: 6px solid #f59e0b !important; 
        }

.gov-subheader-cell {
            background-color: #f1f5f9 !important; 
            color: #334155 !important; 
            font-weight: 600;
            font-size: 0.88rem;
            padding: 12px 10px !important;
            text-align: center !important;
            border: 1.5px solid #cbd5e1 !important;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

.gov-report-table tbody td {
            padding: 14px 16px !important;
            vertical-align: top;
            font-size: 0.95rem;
            color: #334155;
            border: 1px solid #cbd5e1 !important;
            line-height: 1.6;
        }

.gov-report-table tbody tr:nth-child(even) td {
            background-color: #f8fafc;
        }

.gov-report-table tbody td a {
            color: #2563eb;
            font-weight: 600;
            text-decoration: none;
            transition: color 0.15s ease;
            display: inline-block;
            margin-bottom: 2px;
        }

.gov-report-table tbody td a:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

.table-bordered td, .table-bordered th {
            border: 1px solid #e2e8f0;
        }

.table > thead > tr > th {
            border-bottom-color: #cbd5e1;
        }

.table-bordered thead td, .table-bordered thead th {
            border-bottom-width: 1px;
            vertical-align:middle;
        }

.modern-table-container {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid #e2e8f0;
            padding: 0;
            margin-bottom: 20px;
            overflow: hidden;
        }

.modern-table {
            border-collapse: separate !important;
            border-spacing: 0 !important;
            width: 100%;
            margin-bottom: 0 !important;
            border: none !important;
        }

.modern-table thead th {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
            color: #ffffff !important;
            font-family: 'Open Sans', 'Kanit', sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.82rem;
            letter-spacing: 0.06em;
            padding: 16px 14px !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            vertical-align: middle;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        }

.modern-table tbody td {
            padding: 16px 18px !important;
            vertical-align: middle;
            font-family: 'Open Sans', 'Kanit', sans-serif;
            font-size: 0.95rem;
            color: #475569;
            border: 1px solid #e2e8f0 !important;
            transition: all 0.2s ease;
        }

.modern-table tbody tr:hover td {
            background-color: #f8fafc !important;
        }

.composition-header-cell {
            background: linear-gradient(90deg, #475569 0%, #64748b 100%) !important;
            color: #ffffff !important;
            font-weight: 600;
            font-size: 0.98rem !important;
            border-left: 5px solid #3b82f6 !important;
            text-align: left !important;
            padding-left: 24px !important;
        }

.modern-table tbody tr td:nth-last-child(2) {
            font-weight: 700 !important;
            color: #0f172a !important;
            background-color: #f8fafc !important;
            text-align: center;
        }

.modern-table tbody tr td:last-child {
            font-weight: 700 !important;
            color: #0284c7 !important;
            background-color: #f0f9ff !important;
            text-align: center;
        }

.modern-tfoot tr td {
            background-color: #f1f5f9 !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            border-top: 2px solid #cbd5e1 !important;
            border-bottom: 2px solid #cbd5e1 !important;
            padding: 16px 18px !important;
            font-size: 0.95rem;
        }

.modern-tfoot tr td:first-child {
            text-align: center !important;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.88rem;
            letter-spacing: 0.05em;
            color: #475569 !important;
        }

.modern-tfoot tr td:last-child {
            color: #0369a1 !important;
            background-color: #e0f2fe !important;
        }

.login-page #logo.center {
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: 40%;
				padding-bottom: 30px;
			}

@media (max-width: 768px){
				.login-page #logo.center {
					height: 0;
					visibility: hidden;
					width: 0;
				}
			}

.center {
    text-align: center !important;
}

/* --- Summary Table --- */
.fill-in-assessment-page .assess-summary-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.fill-in-assessment-page .assess-summary-table thead th {
    background-color: #334155 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 10px 12px;
    font-size: 0.88rem;
    text-align: center;
    border: none !important;
}
.fill-in-assessment-page .assess-summary-table thead tr:first-child th {
    background-color: #0f172a !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px;
}
.fill-in-assessment-page .assess-summary-table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle;
    font-size: 0.9rem;
    border: 1px solid #cbd5e1 !important;
    color: #475569;
}
.fill-in-assessment-page .assess-summary-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* --- Badge Result (M, P, N, NA) --- */
.fill-in-assessment-page .assess-badge {
    display: inline-block;
    padding: 3px 10px;
    font-weight: 700;
    border-radius: 4px;
    font-size: 0.82rem;
    text-align: center;
    min-width: 40px;
}
.fill-in-assessment-page .assess-badge-m {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}
.fill-in-assessment-page .assess-badge-p {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}
.fill-in-assessment-page .assess-badge-n {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}
.fill-in-assessment-page .assess-badge-na {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}

/* --- Content Assessment Table --- */
.fill-in-assessment-page .assess-table-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #cbd5e1;
    overflow: hidden;
    margin-bottom: 30px;
}
.fill-in-assessment-page .assess-main-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
}
.fill-in-assessment-page .assess-composition-header {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.05rem !important;
    padding: 14px 20px !important;
    text-align: left !important;
    border-left: 6px solid #3b82f6 !important;
    border-bottom: 1px solid #1e3a8a !important;
}
.fill-in-assessment-page .assess-topic-header {
    background-color: #fef3c7 !important;
    color: #78350f !important;
    font-weight: 600;
    font-size: 0.95rem !important;
    padding: 12px 24px !important;
    text-align: left !important;
    border-left: 6px solid #f59e0b !important;
    border-bottom: 1px solid #fde68a !important;
}
.fill-in-assessment-page .assess-subheader-row th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 16px !important;
    text-align: center;
    border-bottom: 2px solid #cbd5e1 !important;
    border-top: none !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fill-in-assessment-page .assess-main-table tbody tr {
    transition: all 0.2s ease;
}
.fill-in-assessment-page .assess-main-table tbody tr:hover td, 
.fill-in-assessment-page .assess-main-table tbody tr:hover th {
    background-color: #f8fafc !important;
}
.fill-in-assessment-page .assess-main-table tbody th.assess-kpi-cell {
    font-weight: 500;
    font-size: 0.92rem;
    color: #1e293b;
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: left;
    vertical-align: middle;
}
.fill-in-assessment-page .assess-main-table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle;
    font-size: 0.92rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: center;
}
.fill-in-assessment-page .assess-main-table tbody tr:last-child td, 
.fill-in-assessment-page .assess-main-table tbody tr:last-child th {
    border-bottom: none !important;
}

/* --- Badge Status Icons (Clean Circular Layout) --- */
.fill-in-assessment-page .assess-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.15rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.fill-in-assessment-page .assess-status-icon.status-pending {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fecaca !important;
}
.fill-in-assessment-page .assess-status-icon.status-pending:hover {
    background-color: #fee2e2 !important;
    transform: scale(1.12);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
}
.fill-in-assessment-page .assess-status-icon.status-complete {
    background-color: #f0fdf4 !important;
    color: #22c55e !important;
    border: 1px solid #bbf7d0 !important;
}
.fill-in-assessment-page .assess-status-icon.status-complete:hover {
    background-color: #dcfce7 !important;
    transform: scale(1.12);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.15);
}

/* --- Scoped Modal Redesign --- */
.fill-in-assessment-page #insert_result_kpi .modal-content,
.fill-in-assessment-page #update_result_kpi .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}
.fill-in-assessment-page #insert_result_kpi .modal-header,
.fill-in-assessment-page #update_result_kpi .modal-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}
.fill-in-assessment-page #insert_result_kpi .modal-title,
.fill-in-assessment-page #update_result_kpi .modal-title {
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em;
    color: #ffffff !important;
}
.fill-in-assessment-page #insert_result_kpi .close,
.fill-in-assessment-page #update_result_kpi .close {
    color: #ffffff !important;
    opacity: 0.8;
    font-size: 28px;
    text-shadow: none;
    transition: opacity 0.2s;
    outline: none;
    margin-top: -10px;
}
.fill-in-assessment-page #insert_result_kpi .close:hover,
.fill-in-assessment-page #update_result_kpi .close:hover {
    opacity: 1;
}
.fill-in-assessment-page #insert_result_kpi .modal-body,
.fill-in-assessment-page #update_result_kpi .modal-body {
    padding: 24px !important;
    background-color: #f8fafc !important;
}
.fill-in-assessment-page #show_insert_result_kpi_name, 
.fill-in-assessment-page #show_update_result_kpi_name {
    background-color: #fefce8 !important;
    border: 1px solid #fef08a !important;
    border-left: 6px solid #eab308 !important;
    color: #713f12 !important;
    padding: 18px 24px !important;
    border-radius: 16px !important;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 25px;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.04), 0 4px 6px -2px rgba(234, 179, 8, 0.02) !important;
}
/* Nav Tabs override */
.fill-in-assessment-page #insert_result_kpi .nav-tabs.md-tabs,
.fill-in-assessment-page #update_result_kpi .nav-tabs.md-tabs {
    border-bottom: 1px solid #cbd5e1 !important;
    margin-bottom: 0 !important;
}
.fill-in-assessment-page #insert_result_kpi .nav-tabs.md-tabs .nav-link,
.fill-in-assessment-page #update_result_kpi .nav-tabs.md-tabs .nav-link {
    border: none !important;
    color: #64748b !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    transition: all 0.2s;
    font-size: 0.9rem;
    background: transparent !important;
}
.fill-in-assessment-page #insert_result_kpi .nav-tabs.md-tabs .nav-link.active,
.fill-in-assessment-page #update_result_kpi .nav-tabs.md-tabs .nav-link.active {
    color: #2563eb !important;
    font-weight: 600 !important;
    border-bottom: none !important;
}
.fill-in-assessment-page #insert_result_kpi .tab-content,
.fill-in-assessment-page #update_result_kpi .tab-content {
    background: #ffffff;
    border: 1px solid #cbd5e1 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px;
    padding: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
}
/* Radio cards grid */
.fill-in-assessment-page .assess-modal-score-table {
    border: none !important;
    background: transparent !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}
.fill-in-assessment-page .assess-modal-score-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
.fill-in-assessment-page .assess-modal-score-table td {
    flex: 1;
    min-width: 160px;
    border: none !important;
    padding: 0 !important;
}
.fill-in-assessment-page .assess-modal-score-table .form-group {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0 !important;
}
.fill-in-assessment-page .assess-modal-score-table .form-group:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}
.fill-in-assessment-page .assess-modal-score-table input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2563eb;
    margin: 0;
}
.fill-in-assessment-page .assess-modal-score-table label {
    font-weight: 500;
    color: #334155;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}
/* File Uploader buttons */
.fill-in-assessment-page .btn-modern-upload {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    transition: all 0.2s;
}
.fill-in-assessment-page .btn-modern-upload:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
.fill-in-assessment-page .btn-modern-system {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    transition: all 0.2s;
}
.fill-in-assessment-page .btn-modern-system:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}
/* Modal File list */
.fill-in-assessment-page .assess-modal-files-table-container {
    border: none !important;
    margin-top: 15px;
    background-color: transparent !important;
}
.fill-in-assessment-page .assess-modal-files-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.fill-in-assessment-page .assess-modal-files-table thead {
    display: none !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.fill-in-assessment-page .assess-modal-files-table tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody tr:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}
.fill-in-assessment-page .assess-modal-files-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:first-child {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    flex: 1;
    padding-right: 15px !important;
    text-align: left !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:first-child::before {
    content: "\f0f6";
    font-family: "FontAwesome";
    margin-right: 8px;
    color: #64748b;
    font-size: 1rem;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(2) {
    margin-right: 12px;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #eff6ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(2) a:hover {
    background-color: #dbeafe;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(2) a::before {
    content: "\f06e";
    font-family: "FontAwesome";
    font-size: 0.85rem;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(3) button {
    background-color: #fef2f2 !important;
    border: none !important;
    color: #ef4444 !important;
    font-size: 0.9rem !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    width: auto !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody td:nth-child(3) button:hover {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody tr:last-child td {
    border-bottom: none !important;
}
/* Modern modal buttons */
.btn-modern-save {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    transition: all 0.2s;
}
.btn-modern-save:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
}
.btn-modern-close {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.2s;
}
.btn-modern-close:hover {
    background-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* --- Header Actions (Transfer and Select Department Buttons) --- */
.assess-btn-transfer {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    border: 1.5px solid #d97706 !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.assess-btn-transfer:hover {
    background-color: #d97706 !important;
    border-color: #b45309 !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2) !important;
}
.assess-btn-transfer i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
    display: inline-block !important;
}
.assess-btn-transfer:hover i {
    transform: rotate(180deg);
}

.assess-btn-dept {
    background-color: #475569 !important;
    color: #ffffff !important;
    border: 1.5px solid #334155 !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.assess-btn-dept:hover {
    background-color: #334155 !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 10px rgba(71, 85, 105, 0.2) !important;
}
.assess-btn-dept i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
    display: inline-block !important;
    font-family: 'FontAwesome' !important;
    color: #ffffff !important;
}
.assess-btn-dept:hover i {
    transform: scale(1.15);
}

.assess-btn-dept-selected {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border: 1.5px solid #dc2626 !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.assess-btn-dept-selected:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2) !important;
}
.assess-btn-dept-selected i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
    display: inline-block !important;
    font-family: 'FontAwesome' !important;
    color: #ffffff !important;
}
.assess-btn-dept-selected:hover i {
    transform: scale(1.15);
}

/* Custom Modern Page Header */
.fill-in-assessment-page .page-header-title-custom,
.report-page .page-header-title-custom,
.report-result-page .page-header-title-custom,
.manager-add-assessors-page .page-header-title-custom,
.manager-user-page .page-header-title-custom {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fill-in-assessment-page .page-header-icon-container,
.report-page .page-header-icon-container,
.report-result-page .page-header-icon-container,
.manager-add-assessors-page .page-header-icon-container,
.manager-user-page .page-header-icon-container {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.fill-in-assessment-page .page-header-text-container h4,
.report-page .page-header-text-container h4,
.report-result-page .page-header-text-container h4,
.manager-add-assessors-page .page-header-text-container h4,
.manager-user-page .page-header-text-container h4 {
    font-size: 1.38rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.fill-in-assessment-page .page-header-text-container h4 span.assess-header-badge,
.report-page .page-header-text-container h4 span.assess-header-badge,
.report-result-page .page-header-text-container h4 span.assess-header-badge,
.manager-add-assessors-page .page-header-text-container h4 span.assess-header-badge,
.manager-user-page .page-header-text-container h4 span.assess-header-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff !important;
    background-color: #2563eb !important;
    padding: 6px 14px;
    border-radius: 30px;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
}
.fill-in-assessment-page .page-header-text-container p,
.report-page .page-header-text-container p,
.report-result-page .page-header-text-container p,
.manager-add-assessors-page .page-header-text-container p,
.manager-user-page .page-header-text-container p {
    font-size: 0.92rem;
    color: #475569;
    margin: 6px 0 0 0;
    font-weight: 500;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* --- Transfer Data Modal Flow UI --- */
.fill-in-assessment-page .assess-transfer-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    width: 100%;
}
.fill-in-assessment-page .assess-transfer-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    width: 42%;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    position: relative;
    transition: all 0.25s ease;
}
.fill-in-assessment-page .assess-transfer-card.source {
    border-top: 4px solid #f59e0b;
}
.fill-in-assessment-page .assess-transfer-card.destination {
    border-top: 4px solid #10b981;
}
.fill-in-assessment-page .assess-transfer-card-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.fill-in-assessment-page .assess-transfer-card.source .assess-transfer-card-icon {
    color: #f59e0b;
}
.fill-in-assessment-page .assess-transfer-card.destination .assess-transfer-card-icon {
    color: #10b981;
}
.fill-in-assessment-page .assess-transfer-card-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fill-in-assessment-page .assess-transfer-year-display {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}
.fill-in-assessment-page .assess-transfer-card.source .assess-transfer-year-display {
    color: #b45309;
}
.fill-in-assessment-page .assess-transfer-card.destination .assess-transfer-year-display {
    color: #047857;
}

/* Connector element */
.fill-in-assessment-page .assess-transfer-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 16%;
}
.fill-in-assessment-page .assess-transfer-arrow-circle {
    background-color: #fef3c7;
    color: #d97706;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.15);
    z-index: 2;
}
.fill-in-assessment-page .assess-transfer-arrow-circle i {
    animation: flowPulse 1.5s infinite;
}
.fill-in-assessment-page .assess-transfer-connector-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #e2e8f0;
    z-index: 1;
}

@keyframes flowPulse {
    0% {
        transform: translateX(-4px);
        opacity: 0.5;
    }
    50% {
        transform: translateX(4px);
        opacity: 1;
    }
    100% {
        transform: translateX(-4px);
        opacity: 0.5;
    }
}

/* Warning alert banner */
.fill-in-assessment-page .assess-transfer-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
}
.fill-in-assessment-page .assess-transfer-warning-icon {
    font-size: 1.25rem;
    color: #d97706;
    margin-top: 2px;
}
.fill-in-assessment-page .assess-transfer-warning-text {
    font-size: 0.88rem;
    color: #78350f;
    line-height: 1.5;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}


/* Custom Submit Button for transfer */
.fill-in-assessment-page .btn-modern-transfer-submit {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    transition: all 0.2s !important;
}
.fill-in-assessment-page .btn-modern-transfer-submit:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2) !important;
}

/* --- Select Department Modal Redesign (Vertical Stack List) --- */
.assess-dept-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual Row Button */
.assess-dept-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background-color: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Left Group */
.assess-dept-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bullet indicator */
.assess-dept-bullet {
    font-size: 0.95rem;
    color: #94a3b8;
    width: 20px;
    text-align: center;
    transition: color 0.2s ease;
}
.assess-dept-row.active .assess-dept-bullet {
    color: #ef4444;
}

/* Department Name */
.assess-dept-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    transition: color 0.2s ease;
}
.assess-dept-row.active .assess-dept-text {
    color: #991b1b;
}

/* Active Badge */
.assess-dept-badge.active {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* Clickable Row Actions */
.assess-dept-row.clickable {
    cursor: pointer;
}
.assess-dept-row.clickable:hover {
    border-color: #ef4444;
    background-color: #fff5f5;
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.05);
}
.assess-dept-row.clickable:hover .assess-dept-bullet {
    color: #ef4444;
}
.assess-dept-row.clickable:hover .assess-dept-text {
    color: #ef4444;
}

/* Action Button */
.assess-dept-btn-action {
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}
.assess-dept-row.clickable:hover .assess-dept-btn-action {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

/* --- Next-Gen Glassmorphic Filter Bar --- */
.modern-filter-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 24px 28px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.03);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Subtle background accent glow */
.modern-filter-bar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.modern-filter-container {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.modern-filter-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modern-filter-item.action-item {
    flex: 0 0 auto;
    min-width: auto;
}

.modern-filter-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modern-filter-label i {
    color: #3b82f6;
    font-size: 0.95rem;
}

.modern-filter-label.label-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Next-Gen Select Field wrapper */
.modern-select-wrapper {
    position: relative;
    width: 100%;
}

.modern-select {
    width: 100%;
    height: 48px !important;
    padding: 10px 40px 10px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

.modern-select:hover {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.modern-select:focus {
    border-color: #3b82f6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 4px 12px rgba(59, 130, 246, 0.08) !important;
    outline: none !important;
}

/* Custom dropdown chevron arrow */
.modern-select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.modern-select-wrapper:hover .modern-select-arrow {
    color: #475569;
    transform: translateY(-50%) scale(1.1);
}

/* --- Next-Gen Premium Excel Button --- */
.btn-modern-excel {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    height: 48px;
    padding: 0 28px !important;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

/* Subtle button shine animation */
.btn-modern-excel::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: 0.75s ease;
}

.btn-modern-excel:hover::after {
    left: 125%;
}

.btn-modern-excel:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

.btn-modern-excel:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.4) !important;
}

.btn-modern-excel i {
    font-size: 1.15rem;
    transition: all 0.2s ease;
}

.btn-modern-excel:hover i {
    transform: rotate(5deg) scale(1.15);
}

/* Responsiveness */
@media (max-width: 768px) {
    .modern-filter-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .modern-filter-item {
        width: 100%;
        min-width: 100%;
    }
    
    .modern-filter-item.action-item {
        margin-top: 0;
    }
    
    .btn-modern-excel {
        width: 100%;
    }
    
    .modern-filter-label.label-hidden {
        display: none;
    }
}


/* ==========================================================================
   Manager Final Score Page Premium Style Upgrades (Official Readable Style)
   ========================================================================== */
.manager-final-score-page .page-header-title-custom {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.manager-final-score-page .page-header-icon-container {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.45rem !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}
.manager-final-score-page .page-header-text-container h4 {
    font-size: 1.38rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.manager-final-score-page .page-header-text-container h4 span.assess-header-badge {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #2563eb !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
}
.manager-final-score-page .page-header-text-container p {
    font-size: 0.92rem !important;
    color: #475569 !important;
    margin: 6px 0 0 0 !important;
    font-weight: 500 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Modern Filter Form Inputs */
.manager-final-score-page .modern-select-wrapper {
    position: relative;
    display: block;
    width: 100%;
}
.manager-final-score-page .modern-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    height: 46px !important;
    padding: 10px 40px 10px 16px !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    cursor: pointer;
}
.manager-final-score-page .modern-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}
.manager-final-score-page .modern-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    font-size: 0.85rem;
}
.manager-final-score-page .modern-form-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px !important;
    display: block;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* Modern Scoped Premium Table Theme (Official Readable Style) */
.manager-final-score-page .modern-table-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
    margin-top: 10px;
}
.manager-final-score-page .modern-table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #cbd5e1 !important;
}
.manager-final-score-page .modern-table thead tr th {
    background: #1e293b !important; /* Formal dark background */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: 1px solid #cbd5e1 !important; /* Clear grid borders for readability */
    padding: 12px 14px !important;
    text-align: left !important; /* Left-aligned headers */
    vertical-align: middle !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}
/* Style subheadings for topics (topic rows) */
.manager-final-score-page .modern-table thead.topic-header tr th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    text-align: left !important;
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    padding: 12px 20px !important;
    border: 1px solid #cbd5e1 !important;
}
.manager-final-score-page .modern-table tbody tr {
    transition: background-color 0.15s ease !important;
}
.manager-final-score-page .modern-table tbody tr:hover {
    background-color: #f8fafc !important;
}
.manager-final-score-page .modern-table tbody tr td {
    border: 1px solid #cbd5e1 !important; /* Clean grid borders for tracking columns */
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}
.manager-final-score-page .modern-table tbody tr td.center {
    text-align: center !important;
    font-weight: 600;
}
/* Force first column (Indicator Names) to align left */
.manager-final-score-page .modern-table tbody tr td:first-child,
.manager-final-score-page .modern-table tbody tr td.fix_colum_frist {
    text-align: left !important;
}

/* Custom Radio Buttons inside Scoring cell */
.manager-final-score-page .scoring-radio-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
}
.manager-final-score-page .scoring-radio-table tr td {
    padding: 6px 4px !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
}
.manager-final-score-page .scoring-radio-table label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 2px !important;
    display: block;
}
/* Modern comment textarea */
.manager-final-score-page .modern-table textarea.insert_comment_final_assessors {
    border: 2px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    min-width: 250px !important;
}
.manager-final-score-page .modern-table textarea.insert_comment_final_assessors:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* High visibility for unassessed rows */
.manager-final-score-page .unassessed-row {
    background-color: #fff5f5 !important;
}
.manager-final-score-page .unassessed-row:hover {
    background-color: #fed7d7 !important;
}


/* ==========================================================================
   Manager User Page Premium Style Upgrades
   ========================================================================== */
.manager-user-page .table>thead>tr>th {
    text-align: center;
}

/* Modern Premium Input Fields */
.manager-user-page .form-control:not(.modern-select) {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    height: 46px !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

.manager-user-page .form-control:not(.modern-select):focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    background-color: #ffffff !important;
}

.manager-user-page .modern-form-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px !important;
    display: block;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* Modern User Form Card Styling */
.manager-user-page .card.version {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.manager-user-page .card.version .card-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    padding: 20px 24px !important;
    border-bottom: none !important;
}

.manager-user-page .card.version .card-header h4 {
    color: #ffffff !important;
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* Modern Form Buttons */
.manager-user-page .btn-modern-submit {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    height: 48px;
    padding: 0 24px !important;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100%;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

.manager-user-page .btn-modern-submit:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 10px 24px -4px rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-1px);
}

.manager-user-page .btn-modern-submit:active {
    transform: translateY(0);
}

/* Edit modal buttons */
.manager-user-page .btn-modern-save {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: none !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 12px rgba(202, 138, 4, 0.2) !important;
    transition: all 0.2s;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

.manager-user-page .btn-modern-save:hover {
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%) !important;
    box-shadow: 0 6px 16px rgba(202, 138, 4, 0.3) !important;
    transform: translateY(-1px);
}

.manager-user-page .btn-modern-cancel {
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-weight: 600;
    transition: all 0.2s;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

/* Action icon buttons in table */
.manager-user-page .btn-table-action {
    width: 36px;
    height: 36px;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.manager-user-page .btn-table-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.manager-user-page .btn-table-action i {
    font-size: 1.05rem;
}


/* ==========================================================================
   /* ==========================================================================
   /* ==========================================================================
   Manager Form Criterion Page Premium Style Upgrades
   ========================================================================== */
.manager-form-criterion-page .page-header-title-custom {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.manager-form-criterion-page .page-header-icon-container {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.45rem !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}
.manager-form-criterion-page .page-header-text-container h4 {
    font-size: 1.38rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.manager-form-criterion-page .page-header-text-container h4 span.assess-header-badge {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #2563eb !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
}
.manager-form-criterion-page .page-header-text-container p {
    font-size: 0.92rem !important;
    color: #475569 !important;
    margin: 6px 0 0 0 !important;
    font-weight: 500 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Modern Card Version */
.manager-form-criterion-page .card.version {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #cbd5e1 !important;
    overflow: hidden !important;
}
.manager-form-criterion-page .card.version .card-block {
    padding: 0 !important;
}

/* Sidebar Navigation Items spacing override */
.manager-form-criterion-page .nav.navigation {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.manager-form-criterion-page .nav.navigation > li:first-child {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-weight: 750 !important;
    font-size: 1rem !important;
    text-align: left !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    width: 100% !important;
    margin-left: 0 !important;
}
.manager-form-criterion-page .nav.navigation a {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}
.manager-form-criterion-page .nav.navigation a li {
    padding: 14px 20px !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: left !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    width: 100% !important;
    margin-left: 0 !important;
}
.manager-form-criterion-page .nav.navigation a:hover li {
    background-color: #f8fafc !important;
    color: #2563eb !important;
    padding-left: 26px !important;
}
.manager-form-criterion-page .nav.navigation a li.active {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-left: 5px solid #2563eb !important;
    font-weight: 700 !important;
    padding-left: 15px !important;
}
.manager-form-criterion-page .nav.navigation li:last-child {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 16px 12px !important;
}

/* Modern Dark Table Header Grid (Restored Theme) */
.manager-form-criterion-page .modern-table-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
}
.manager-form-criterion-page .modern-table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #cbd5e1 !important;
}
.manager-form-criterion-page .modern-table thead tr th {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}
.manager-form-criterion-page .modern-table tbody tr {
    transition: background-color 0.15s ease !important;
}
.manager-form-criterion-page .modern-table tbody tr:hover {
    background-color: #f8fafc !important;
}
.manager-form-criterion-page .modern-table tbody tr td {
    border: 1px solid #cbd5e1 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}
.manager-form-criterion-page .modern-table tbody tr td.center {
    text-align: center !important;
}

/* Scoped Modals and Form Elements in Manager Form Criterion Page */
.manager-form-criterion-page .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}
.manager-form-criterion-page .modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 18px 24px !important;
}
.manager-form-criterion-page .modal-title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.manager-form-criterion-page .modal-body {
    background-color: #f8fafc !important;
    padding: 24px !important;
}
.manager-form-criterion-page .modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 24px !important;
}
.manager-form-criterion-page .form-control {
    border: 2px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.manager-form-criterion-page .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.manager-form-criterion-page label {
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.manager-form-criterion-page textarea.form-control {
    resize: vertical !important;
}
.manager-form-criterion-page .md-tabs {
    border-bottom: 2px solid #cbd5e1 !important;
}
.manager-form-criterion-page .md-tabs .nav-link {
    font-weight: 700 !important;
    color: #64748b !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    padding: 12px 16px !important;
}
.manager-form-criterion-page .md-tabs .nav-link.active {
    color: #2563eb !important;
}
.manager-form-criterion-page .btn {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    transition: all 0.2s ease !important;
}
.manager-form-criterion-page .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
}
.manager-form-criterion-page .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px);
}
.manager-form-criterion-page .btn-warning {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(234, 179, 8, 0.2) !important;
}
.manager-form-criterion-page .btn-warning:hover {
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%) !important;
    transform: translateY(-1px);
}
.manager-form-criterion-page .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2) !important;
}
.manager-form-criterion-page .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-1px);
}
.manager-form-criterion-page .btn-default {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    border: none !important;
}
.manager-form-criterion-page .btn-default:hover {
    background-color: #cbd5e1 !important;
}

/* ==========================================================================
   Assessors Evaluation Page Styles
   ========================================================================== */
.fill-in-assessment-page .modern-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.fill-in-assessment-page .modern-table td {
    vertical-align: middle !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 16px !important;
    color: #334155 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Radio buttons evaluation scoring sub-table */
.fill-in-assessment-page .select_insert_result_kpi table {
    background-color: transparent !important;
    border: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.fill-in-assessment-page .select_insert_result_kpi table td {
    border: none !important;
    padding: 4px 6px !important;
    text-align: center !important;
}

/* Custom styled modern scoring options */
.fill-in-assessment-page label.pointer {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
    display: inline-block !important;
    margin-bottom: 2px !important;
    transition: color 0.2s !important;
}

.fill-in-assessment-page label.pointer:hover {
    color: #2563eb !important;
}

/* Styled radio inputs */
.fill-in-assessment-page input[type="radio"].insert_result_assessors {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 50% !important;
    outline: none !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    display: inline-block !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 auto !important;
}

.fill-in-assessment-page input[type="radio"].insert_result_assessors:checked {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
}

.fill-in-assessment-page input[type="radio"].insert_result_assessors:checked::after {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #2563eb !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Styled comment textareas */
.fill-in-assessment-page textarea.insert_comment_assessors {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    min-width: 250px !important;
    height: 120px !important;
    resize: vertical !important;
}

.fill-in-assessment-page textarea.insert_comment_assessors:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* Button style adjustments inside evaluation tables */
.fill-in-assessment-page .get_data_assessors {
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.fill-in-assessment-page .get_data_assessors:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Unassessed row highlight */
.fill-in-assessment-page .unassessed-row {
    background-color: #fff5f5 !important;
    border-left: 4px solid #ef4444 !important;
    transition: background-color 0.2s !important;
}

.fill-in-assessment-page .unassessed-row:hover {
    background-color: #fee2e2 !important;
}

/* Modern Summary Button Design */
.fill-in-assessment-page .btn-modern-summary {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    height: 48px !important;
    padding: 0 26px !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

.fill-in-assessment-page .btn-modern-summary:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.fill-in-assessment-page .btn-modern-summary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

.fill-in-assessment-page .btn-modern-summary i {
    font-size: 1.1rem !important;
}

/* Premium Modern Toast Notification */
.fill-in-assessment-page .swal2-toast-success,
.manager-final-score-page .swal2-toast-success,
.manager-add-assessors-page .swal2-toast-success {
    background: rgba(240, 253, 250, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(187, 247, 208, 0.9) !important;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1), 0 8px 16px -6px rgba(0, 0, 0, 0.02) !important;
    border-radius: 14px !important;
    padding: 12px 20px !important;
}

.fill-in-assessment-page .swal2-toast-success .swal2-title,
.manager-final-score-page .swal2-toast-success .swal2-title,
.manager-add-assessors-page .swal2-toast-success .swal2-title {
    color: #065f46 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

.fill-in-assessment-page .swal2-toast-error,
.manager-final-score-page .swal2-toast-error,
.manager-add-assessors-page .swal2-toast-error {
    background: rgba(254, 242, 242, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(254, 202, 202, 0.9) !important;
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.1), 0 8px 16px -6px rgba(0, 0, 0, 0.02) !important;
    border-radius: 14px !important;
    padding: 12px 20px !important;
}

.fill-in-assessment-page .swal2-toast-error .swal2-title,
.manager-final-score-page .swal2-toast-error .swal2-title,
.manager-add-assessors-page .swal2-toast-error .swal2-title {
    color: #991b1b !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Modern Summary Card & Table Styles */
.fill-in-assessment-page .assess-summary-card {
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    margin-top: 30px !important;
    background: #ffffff !important;
}

.fill-in-assessment-page .assess-summary-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

.fill-in-assessment-page .assess-summary-table thead th {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.9rem !important;
    padding: 14px 18px !important;
    border: 1px solid #e2e8f0 !important;
}

.fill-in-assessment-page .assess-summary-table tbody td {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
}

.fill-in-assessment-page .assess-summary-table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Badges for summary results */
.fill-in-assessment-page .summary-badge-m {
    display: inline-block;
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

.fill-in-assessment-page .summary-badge-p {
    display: inline-block;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

.fill-in-assessment-page .summary-badge-n {
    display: inline-block;
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

.fill-in-assessment-page .summary-badge-na {
    display: inline-block;
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* Modal Score Table Styles */
.fill-in-assessment-page .modal-score-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

.fill-in-assessment-page .modal-score-table thead th {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
}

.fill-in-assessment-page .modal-score-table tbody td {
    padding: 14px 16px !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    vertical-align: middle !important;
}

/* Highlight row for the active assessor */
.fill-in-assessment-page .modal-score-table tr.active-assessor-row {
    background-color: #fef2f2 !important;
}

.fill-in-assessment-page .modal-score-table tr.active-assessor-row td {
    font-weight: 700 !important;
    color: #b91c1c !important;
}

/* Modern elegant selects for manager forms and modals */
.manager-form-criterion-page select.form-control,
.manager-final-score-page select.form-control,
.manager-add-assessors-page select.form-control {
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 10px 16px !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease-in-out !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

.manager-form-criterion-page select.form-control:focus,
.manager-final-score-page select.form-control:focus,
.manager-add-assessors-page select.form-control:focus {
    border-color: #3b82f6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* --- Scoped Modern Styles for fill_in_assessment Modals & Sidebar --- */
.fill-in-assessment-page #insert_result_kpi .modal-content,
.fill-in-assessment-page #update_result_kpi .modal-content,
.fill-in-assessment-page #file_in_system .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}
.fill-in-assessment-page #insert_result_kpi .modal-header,
.fill-in-assessment-page #update_result_kpi .modal-header,
.fill-in-assessment-page #file_in_system .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 20px 24px !important;
}
.fill-in-assessment-page #insert_result_kpi .modal-title,
.fill-in-assessment-page #update_result_kpi .modal-title,
.fill-in-assessment-page #file_in_system .modal-title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page #insert_result_kpi .modal-body,
.fill-in-assessment-page #update_result_kpi .modal-body,
.fill-in-assessment-page #file_in_system .modal-body {
    padding: 24px !important;
    background-color: #f8fafc !important;
}
.fill-in-assessment-page #insert_result_kpi .modal-footer,
.fill-in-assessment-page #update_result_kpi .modal-footer,
.fill-in-assessment-page #file_in_system .modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 24px !important;
}

/* Modern Tabs inside Modal */
.fill-in-assessment-page .modal-body .card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin-bottom: 20px !important;
}
.fill-in-assessment-page .modal-body .nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 0 16px !important;
    background: #f8fafc !important;
}
.fill-in-assessment-page .modal-body .nav-link {
    font-weight: 600 !important;
    color: #64748b !important;
    border: none !important;
    padding: 12px 16px !important;
    border-bottom: none !important;
    transition: all 0.2s !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .modal-body .nav-link.active {
    color: #3b82f6 !important;
    border-bottom: none !important;
    background: transparent !important;
}
.fill-in-assessment-page .modal-body .tab-content {
    padding: 20px !important;
    background: #ffffff !important;
}

/* Text styling inside tabs */
.fill-in-assessment-page .modal-body .tab-pane p {
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

/* Modern Form Elements */
.fill-in-assessment-page .form-group label {
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    display: inline-block;
}
.fill-in-assessment-page .modal-body .form-control {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .modal-body .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Modern Button classes */
.fill-in-assessment-page .btn-modern-save {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2) !important;
    transition: all 0.2s !important;
    color: #ffffff !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .btn-modern-save:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px -1px rgba(16, 185, 129, 0.3) !important;
    color: #ffffff !important;
}
.fill-in-assessment-page .btn-modern-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: all 0.2s !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .btn-modern-close:hover {
    background: #e2e8f0 !important;
    color: #334155 !important;
}
.fill-in-assessment-page .btn-modern-upload {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    color: white !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    transition: all 0.2s !important;
}
.fill-in-assessment-page .btn-modern-upload:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}
.fill-in-assessment-page .btn-modern-system {
    background: #f59e0b !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    transition: all 0.2s !important;
}
.fill-in-assessment-page .btn-modern-system:hover {
    background: #d97706 !important;
    transform: translateY(-1px) !important;
}

/* Files Table inside Modal */
.fill-in-assessment-page .assess-modal-files-table-container {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    background: #ffffff !important;
}
.fill-in-assessment-page .assess-modal-files-table {
    margin: 0 !important;
}
.fill-in-assessment-page .assess-modal-files-table thead tr {
    background: #334155 !important;
    color: #ffffff !important;
}
.fill-in-assessment-page .assess-modal-files-table thead th {
    padding: 12px 16px !important;
    font-weight: 600 !important;
    border: none !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.9rem !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .assess-modal-files-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Clean score details table headers */
.fill-in-assessment-page .assess-modal-score-table {
    border: none !important;
    margin-bottom: 16px !important;
}
.fill-in-assessment-page .assess-modal-score-table thead td {
    padding: 0 0 12px 0 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border: none !important;
    font-size: 1rem !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Premium interactive option cards for M/P/N/NA */
.fill-in-assessment-page .assess-modal-score-table tbody {
    display: block !important;
    width: 100% !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 0 !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N td,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N .form-group,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N .form-group {
    margin: 0 !important;
    position: relative !important;
}

/* Hide default radio input but keep it clickable and keyboard accessible */
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"],
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* Custom card styled label */
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    color: #475569 !important;
    height: 100% !important;
    min-height: 85px !important;
    box-sizing: border-box !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

/* Hover effect */
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"]:hover + label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"]:hover + label {
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Checked states - customized by score type */
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"][result="M"]:checked + label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"][result="M"]:checked + label {
    border-color: #10b981 !important;
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"][result="P"]:checked + label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"][result="P"]:checked + label {
    border-color: #f59e0b !important;
    background-color: #fffbeb !important;
    color: #b45309 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"][result="N"]:checked + label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"][result="N"]:checked + label {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}
.fill-in-assessment-page .assess-modal-score-table tr#answer_M_P_N input[type="radio"][result="NA"]:checked + label,
.fill-in-assessment-page .assess-modal-score-table tr#show_update_answer_M_P_N input[type="radio"][result="NA"]:checked + label {
    border-color: #64748b !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

/* Modernize SunEditor styling */
.fill-in-assessment-page .sun-editor {
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    overflow: hidden !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}
.fill-in-assessment-page .sun-editor-editable {
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
}
.fill-in-assessment-page .sun-editor .se-btn-module-border {
    border-radius: 8px !important;
}

/* Modern Sidebar Navigation for fill_in_assessment */
.fill-in-assessment-page .nav.navigation {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.fill-in-assessment-page .nav.navigation > li:first-child {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-weight: 750 !important;
    font-size: 1rem !important;
    text-align: left !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    width: 100% !important;
    margin-left: 0 !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.fill-in-assessment-page .nav.navigation li.select_composition,
.fill-in-assessment-page .nav.navigation li.active {
    padding: 14px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: left !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
    width: 100% !important;
    margin-left: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.fill-in-assessment-page .nav.navigation li.select_composition {
    background-color: #ffffff !important;
    color: #334155 !important;
}
.fill-in-assessment-page .nav.navigation li.select_composition:hover {
    background-color: #f8fafc !important;
    color: #2563eb !important;
    padding-left: 26px !important;
}
.fill-in-assessment-page .nav.navigation li.active {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-left: 5px solid #2563eb !important;
    font-weight: 700 !important;
    padding-left: 15px !important;
}

/* Robust fix to eliminate active tab double borders/shadows */
.fill-in-assessment-page .modal-body .nav-tabs.md-tabs .nav-link,
.fill-in-assessment-page .modal-body .nav-tabs.md-tabs .nav-link.active,
.fill-in-assessment-page .modal-body .nav-tabs.md-tabs .nav-item,
.fill-in-assessment-page .modal-body .nav-tabs.md-tabs a,
.fill-in-assessment-page .modal-body .nav-tabs.md-tabs a.active {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Duplicate/Transfer Structure Modal Styles */
.assess-transfer-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 15px;
    flex-wrap: nowrap;
}

.assess-transfer-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.assess-transfer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.assess-transfer-card.source::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.assess-transfer-card.destination::before {
    background: linear-gradient(90deg, #eab308, #ca8a04);
}

.assess-transfer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.assess-transfer-card-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.assess-transfer-card.source .assess-transfer-card-icon {
    color: #64748b;
}

.assess-transfer-card.destination .assess-transfer-card-icon {
    color: #eab308;
}

.assess-transfer-card-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.assess-transfer-year-display {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.assess-transfer-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60px;
    height: 100%;
}

.assess-transfer-connector-line {
    width: 100%;
    height: 3px;
    background: #cbd5e1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.assess-transfer-arrow-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    color: #94a3b8;
    transition: all 0.2s ease;
}

.assess-transfer-arrow-circle i.arrow-anim {
    font-size: 0.95rem;
    animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
    0% { transform: translateX(-2px); opacity: 0.6; }
    50% { transform: translateX(2px); opacity: 1; color: #eab308; }
    100% { transform: translateX(-2px); opacity: 0.6; }
}

.assess-transfer-warning-banner {
    display: flex;
    gap: 16px;
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-radius: 12px;
    padding: 16px 20px;
    align-items: flex-start;
}

.assess-transfer-warning-icon {
    font-size: 1.4rem;
    color: #ca8a04;
    line-height: 1;
    margin-top: 2px;
}

.assess-transfer-warning-text {
    font-size: 0.9rem;
    color: #713f12;
    line-height: 1.6;
    font-family: 'Sarabun', 'Kanit', sans-serif;
}

.btn-modern-transfer-submit {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.2) !important;
    transition: all 0.2s !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

.btn-modern-transfer-submit:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3) !important;
    transform: translateY(-1px);
}

.btn-modern-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    font-family: 'Sarabun', 'Kanit', sans-serif !important;
}

.btn-modern-close:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}